<template>
    <!-- 分销商品管理 -->
    <div>
        <div class="head">
            <span>分销商品</span>
        </div>
        <div class="myviews">
            <div class="myviews-x">
                <div class="myviews-x-a">
                    <span>商品搜索</span>
                    <input type="text" placeholder="输入商品名称/货号/ID搜索">
                </div>
                <div class="myviews-x-b"> 
                    <span>商品价格</span>
                    <input type="text" placeholder="最低价格">
                    <div>元</div>
                    <span style="margin-left:8px;">至</span>
                    <input type="text" placeholder="最高价格">
                    <div>元</div>
                </div>
                <div class="myviews-x-c">
                    <span>商品分类</span>
                    <select id="sel" placeholder="请选择" v-model="value1">
                        <option value= "黄金">黄金</option>
                        <option value="白银" >白银</option  >
                        <option value="青铜">青铜</option>
                    </select>
                </div>
            </div>
            <div class="myviews-y">
                <div class="myviews-y-a">
                    <span>创建时间</span>
                    <el-date-picker
                    v-model="value13"
                    type="date"
                    placeholder="选择时间"
                    :default-value="new Date(2023, 5, 5)"
                    popper-class="date-style"
                    :style="{ width: '120px' }"
                    />
                    <span style="margin-right: 0;">至</span>
                    <el-date-picker
                    v-model="value14"
                    type="date"
                    placeholder="选择时间"
                    :default-value="new Date(2023, 5, 5)"
                    :style="{ width: '120px' }"
                    />
                </div>
                <div class="myviews-y-b">
                    <span>分销状态</span>
                    <select id="sel" placeholder="请选择" v-model="value2">
                        <option value= "全部">全部</option>
                        <option value="参与" >参与</option  >
                        <option value="不参与">不参与</option>
                    </select>
                </div>
                <div class="myviews-y-c">
                    <span>成本价状态</span>
                    <select id="sel" placeholder="请选择" v-model="value3">
                        <option value= "全部">全部</option>
                        <option value="已设置" >已设置</option  >
                        <option value="未设置">未设置</option>
                    </select>
                </div>
                <button class="bu1">筛选</button>
                <span class="qin">清空</span>
            </div>
        </div>
        <div class="newview">
            <div class="newview-headi">
                <div :class="{active:activeclass==1}" @click="active(1)">全部</div>
                <div :class="{active:activeclass==2}" @click="active(2)">销售中</div>
                <div :class="{active:activeclass==3}" @click="active(3)">下架中</div>
                <div :class="{active:activeclass==4}" @click="active(4)">售罄</div>
            </div>
            <div class="newview-b">
                <div class="mb-2 flex items-center text-sm">
                        <el-radio-group v-model="radio1" class="ml-4" >
                        <el-radio label="允许" size="large">当页全选</el-radio>
                        <el-radio label="禁止" size="large">全选所有页</el-radio>
                        </el-radio-group>
                        <button class="bu2">参与</button>
                        <button class="bu2">不参与</button>
                </div>
                <div class="newview-b-x">
                    <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            style="width: 100%"
            >
            <el-table-column  label="商品描述" width="180" align="center">
              <template #default="scope">
                <div class="fromhead">
                    <el-checkbox prop="xuan" label="当前下线数" size="large" />
                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="money" label="商品价格" align="center"/>
            <el-table-column prop="inventory" sortable label="库存" align="center"/>
            <el-table-column prop="sales" sortable label="销量" align="center" />
            <el-table-column prop="date" sortable label="创建时间" align="center"/>
            <el-table-column prop="astate" sortable label="商品状态" align="center"/>
            <el-table-column prop="bstate" sortable label="分销状态" align="center"/>
            <el-table-column prop="cstate" label="成本价状态" align="center"/>
            <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="passK(scope.row)"
                >参与</el-button>
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="passK(scope.row)"
                >不参与</el-button>
            </template>
            </el-table-column>
            
            </el-table>
                </div >
                
            <!-- 分页 -->
            <el-pagination
            :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            :total="Total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="display: flex;justify-content: flex-end;margin-bottom:20px;"
          />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onBeforeMount } from 'vue';

const value1=ref() //分类下拉框
const value2=ref('全部') //分销状态下拉框
const value3=ref('全部') //成本价状态下拉框
// 多久到多久的时间选择
const value13 = ref('')
const value14 = ref('')
//单选框
const radio1=ref('')
//动态类
const activeclass=ref(1)
const pagesize=ref(5) //每页显示多少条
const currentPage=ref(1) //当前是第几页
const Total=ref() //总条数
// 表格

const tableData= [
  {
    xaun:false,//是否选择
    name:"王",//昵称
    money:"￥100",//商品价格
    inventory:'223',//库存
    sales:"12",//销量
    date: '2021.02.01 15:00',//创建时间
    astate:'销售中',//商品状态
    bstate: '参与',//分销状态
    cstate: '已设置',//成本价状态
  },
  {
    xaun:false,//是否选择
    name:"王",//昵称
    money:"￥100",//商品价格
    inventory:'223',//库存
    sales:"12",//销量
    date: '2021.02.01 15:00',//创建时间
    astate:'销售中',//商品状态
    bstate: '参与',//分销状态
    cstate: '已设置',//成本价状态
  },
  {
    xaun:false,//是否选择
    name:"王",//昵称
    money:"￥100",//商品价格
    inventory:'223',//库存
    sales:"12",//销量
    date: '2021.02.01 15:00',//创建时间
    astate:'销售中',//商品状态
    bstate: '参与',//分销状态
    cstate: '已设置',//成本价状态
  },
  {
    xaun:false,//是否选择
    name:"王",//昵称
    money:"￥100",//商品价格
    inventory:'223',//库存
    sales:"12",//销量
    date: '2021.02.01 15:00',//创建时间
    astate:'销售中',//商品状态
    bstate: '参与',//分销状态
    cstate: '已设置',//成本价状态
  },
  {
    xaun:false,//是否选择
    name:"王",//昵称
    money:"￥100",//商品价格
    inventory:'223',//库存
    sales:"12",//销量
    date: '2021.02.01 15:00',//创建时间
    astate:'销售中',//商品状态
    bstate: '参与',//分销状态
    cstate: '已设置',//成本价状态
  },
  {
    xaun:false,//是否选择
    name:"王",//昵称
    money:"￥100",//商品价格
    inventory:'223',//库存
    sales:"12",//销量
    date: '2021.02.01 15:00',//创建时间
    astate:'销售中',//商品状态
    bstate: '参与',//分销状态
    cstate: '已设置',//成本价状态
  },
  {
    xaun:false,//是否选择
    name:"王",//昵称
    money:"￥100",//商品价格
    inventory:'223',//库存
    sales:"12",//销量
    date: '2021.02.01 15:00',//创建时间
    astate:'销售中',//商品状态
    bstate: '参与',//分销状态
    cstate: '已设置',//成本价状态
  },
  {
    xaun:false,//是否选择
    name:"王",//昵称
    money:"￥100",//商品价格
    inventory:'223',//库存
    sales:"12",//销量
    date: '2021.02.01 15:00',//创建时间
    astate:'销售中',//商品状态
    bstate: '参与',//分销状态
    cstate: '已设置',//成本价状态
  },
]

const active=((obj:any)=>{
    activeclass.value=obj
})
// 分页
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pagesize.value=val
  // console.log(pagesize.value=val);
  
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  // console.log(val);
  currentPage.value=val

  
}
// 参与按钮
const passK=((obj:any)=>{
    console.log(obj);
    
})
onBeforeMount(()=>{
  // Total.value=Number(Math.ceil(tableData.length/pagesize.value)+'0') //初始化更新分页总数
  Total.value=Number(tableData.length) //初始化更新分页总数
  
  
})
</script>

<style scoped lang="less">
.active{
    color: #ed742f;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: white;
}
.head{
    width: 100%;
    height: 40px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
// 一级
.myviews{
    width: 100%;
    height: 131px;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
    margin-top: 20px;
    input{
        width: 190px;
        height: 20px;
        font-size: 12px;
    }
    font-size: 14px;
}
.myviews-x{
    display: flex;
    height: 50%;
    align-items: center;
    width: 100%;
    margin-left: 20px;
}
.myviews-x-a{
    span{
        margin-right: 10px;
    }
    margin-right: 30px;
}
.myviews-x-b{
    display: flex;
    align-items: center;
    div{
        width: 30px;
        height: 24px;
        border: 1px solid black;
        border-left: 0px;
        display:flex ;
        justify-content: center;
        align-items: center;
    }
    input{
        width: 100px;
        margin-left: 6px;
    }
    span{
        margin-left: 60px;
    }
    margin-right: 40px;
}
.myviews-x-c{
    span{
        margin-right: 10px;
        
    }
    select{
            width: 136px;
            height: 26px;
        }
}
.myviews-y{
    display: flex;
    width: 100%;
    height: 50%;
    align-items: center;
    margin-left: 20px;
}
.myviews-y-a{
    span{
        margin-right: 10px;
    }
    
}
.myviews-y-b{
    span{
        margin-left: 33px;
    }
    select{
            width: 140px;
            height: 26px;
            margin-left: 6px;
        }
}
.myviews-y-c{
    span{
        margin-left: 30px;
    }
    select{
            width: 140px;
            height: 26px;
            margin-left: 6px;
        }
}
.bu1{
    width: 50px;
    height:30px;
    background-color:#ed742f ;
    border-radius: 5px;
    border: 0;
    color: white;
    margin-left: 25px;
}
.qin{
    color: #ed742f;
    margin-left: 20px;
}
// 三级
.newview{
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
    
}
.newview-headi{
    width: 100%;
    display: flex;
    div{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        width: 130px;
        height:50px;
        cursor: pointer;
    }
}
.bu2{
    width: 70px;
    height: 30px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
    color: #2c2b2b;
    margin-left: 20px;
}
.mb-2{
    margin-left: 10px;
}
// 分页
/deep/el-pagination{
    flex-direction: column;
    justify-content: flex-end;
  }
  .newview-b{
    background-color: white;
    box-sizing: border-box;
    padding: 10px;
  }
  .el-table{
    margin-bottom: 20px;
    
  }
  .newview-b-x{
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background-color: white;
  }
</style>